import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
import { Injector } from 'didi';
import EventBus from 'diagram-js/lib/core/EventBus';
import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad';
import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
import Connect from 'diagram-js/lib/features/connect/Connect';
import Create from 'diagram-js/lib/features/create/Create';
import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu';
import Canvas from 'diagram-js/lib/core/Canvas';
import Rules from 'diagram-js/lib/features/rules/Rules';
import { Translate } from 'diagram-js/lib/i18n/translate';
import { Base, Shape } from 'diagram-js/lib/model';
import modelerStore from '/@/store/modules/bpmnModeler';
// import { useMessage } from '/@/hooks/web/useMessage';
// const { createMessage } = useMessage();
// import { assign } from 'min-dash';

//  节点上的画板配置
class EnhancementContextPadProvider extends ContextPadProvider {
  constructor(
    config: any,
    injector: Injector,
    eventBus: EventBus,
    contextPad: ContextPad,
    modeling: Modeling,
    elementFactory: ElementFactory,
    connect: Connect,
    create: Create,
    popupMenu: PopupMenu,
    canvas: Canvas,
    rules: Rules,
    translate: Translate,
  ) {
    super(
      config,
      injector,
      eventBus,
      contextPad,
      modeling,
      elementFactory,
      connect,
      create,
      popupMenu,
      canvas,
      rules,
      translate,
      2000,
    );
    this._config = config || {};
    this._contextPad = contextPad;
    this._modeling = modeling;
    this._elementFactory = elementFactory;
    this._connect = connect;
    this._create = create;
    this._popupMenu = popupMenu;
    this._canvas = canvas;
    this._rules = rules;
    this._translate = translate;

    if (this._config.autoPlace !== false) {
      this._autoPlace = injector.get('autoPlace', false);
    }
    this._contextPad.registerProvider(this);
  }

  getContextPadEntries(element: Base) {
    const contextPad = this._contextPad;
    const modeling = this._modeling;
    const elementFactory = this._elementFactory;
    const connect = this._connect;
    const create = this._create;
    // const popupMenu = this._popupMenu;
    const canvas = this._canvas;
    // const rules = this._rules;
    const config = this._config;
    const autoPlace = this._autoPlace;
    // const translate = this._translate;

    const actions: Record<string, any> = {};
    const appendUserTask = (event: Event, element: Shape) => {
      const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });
      create.start(event, shape, {
        source: element,
      });
    };
    const append = autoPlace
      ? (_, element: Shape, attrs = {}, type = 'bpmn:UserTask') => {
          const shape = this._elementFactory.createShape({
            type,
          });
          Object.assign(shape.businessObject, attrs);
          autoPlace.append(element, shape);
        }
      : appendUserTask;

    // if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
    //   // Replace menu entry
    //   assign(actions, {
    //     replace: {
    //       group: 'edit',
    //       className: 'bpmn-icon-screw-wrench',
    //       title: translate('Change type'),
    //       action: {
    //         click: function (event, element) {
    //           const position = assign(getReplaceMenuPosition(element), {
    //             cursor: { x: event.x, y: event.y },
    //           });

    //           popupMenu.open(element, 'bpmn-replace', position);
    //         },
    //       },
    //     },
    //   });
    // }
    // function getReplaceMenuPosition(element) {
    //   const Y_OFFSET = 5;

    //   const diagramContainer = canvas.getContainer();

    //   const pad = contextPad.getPad(element)?.html as HTMLElement;

    //   const diagramRect = diagramContainer.getBoundingClientRect();
    //   const padRect = pad!.getBoundingClientRect();

    //   const top = padRect.top - diagramRect.top;
    //   const left = padRect.left - diagramRect.left;

    //   const pos = {
    //     x: left,
    //     y: top + padRect.height + Y_OFFSET,
    //   };

    //   return pos;
    // }
    //追加结束事件;
    // actions['append.end-event'] = {
    //   group: 'model',
    //   className: 'bpmn-icon-end-event-none',
    //   title: '追加结束事件',
    //   action: {
    //     dragstart: appendUserTask,
    //     click: function (e: Event, shape: Shape) {
    //       console.log('结束事件--------------------------', e, shape);

    //       append(e, shape, { shapeName: 'circle_s' },'bpmn:EndEvent');
    //     },
    //   },
    // };

    // 添加创建用户任务按钮
    actions['append.append-task'] = {
      group: 'model',
      className: 'bpmn-icon-user-task',
      title: '用户任务',
      action: {
        dragstart: appendUserTask,
        click: function (e: Event, shape: Shape) {
          console.log('添加用户任务', e, shape);
          console.log(
            '%c添加用户任务： ',
            'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
            contextPad,
            modeling,
            create,
            connect,
            canvas,
            element,
            config,
          );

          append(e, shape, { shapeName: 'rectDefault' });
        },
      },
    };

    actions['delete'] = {
      group: 'edit',
      className: (() => {
        const modeler = modelerStore();
        const activites = modeler.getActivities;
        let className = 'bpmn-icon-trash';
        const arr = activites.filter((i) => [0, -1].includes(i.activityType)).map((i) => i.bpmnId);
        if (arr.length && arr.includes(element.id)) {
          className = 'bpmn-icon-trash delete';
        }
        return className;
      })(),
      title: '移除',
      action: {
        dragstart: appendUserTask,
        click: function (_: Event, shape: Shape) {
          modeling.removeShape(shape);
        },
      },
    };

    // 添加一个与edit一组的按钮
    // actions['enhancement-op-1'] = {
    //   group: 'edit',
    //   className: 'enhancement-op',
    //   title: '扩展操作1',
    //   action: {
    //     click: function (e) {
    //       console.log(
    //         '%ce===>144： ',
    //         'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
    //         e,
    //       );
    //     },
    //   },
    // };

    // 添加一个新分组的自定义按钮
    // actions['enhancement-op'] = {
    //   group: 'enhancement',
    //   className: 'enhancement-op',
    //   title: '扩展操作2',
    //   action: {
    //     dragstart: function (e: Event) {
    //       console.log('扩展操作dragstart', e);
    //     },
    //     click: function (e: Event, shape: Shape) {
    //       console.log('扩展操作21111', e, shape);
    //       console.log(
    //         '%ccontextPad===>167： ',
    //         'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
    //         contextPad,
    //         modeling,
    //         create,
    //         connect,
    //         canvas,
    //         element,
    //         config,
    //       );
    //       // replaceShape
    //       console.log(
    //         '%cshape===>autoPlace',
    //         'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
    //         shape,
    //         autoPlace,
    //       );

    //       append(e, shape, { shapeName: 'rectDefault' });
    //     },
    //   },
    // };

    return actions;
  }
}

export default EnhancementContextPadProvider;
